<template>
  <div class="page-container" style="height: 100vh; overflow: auto;">
    <!-- 顶部横幅 -->
    <div class="header-banner">
      <h2>会员中心</h2>
      <p>尊享专属特权，提升您的购物体验！</p>
    </div>
    <el-card class="box-card">
      <div class="membership-content">
        <!-- 会员信息和续费引导并排 -->
        <div class="info-guide-grid">
          <!-- 会员信息卡片 -->
          <el-card class="info-card" shadow="hover">
            <h3 class="section-title">我的会员信息</h3>
            <el-descriptions :column="1" border class="membership-descriptions">
                <el-descriptions-item label="会员等级">
                <el-tag :type="getLevelTagType(membership.level)" class="level-tag">
                    {{ formatMembershipLevel(membership.level) }}
                </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="开始日期">{{ membership.start_date }}</el-descriptions-item>
                <el-descriptions-item label="结束日期">
                    <span v-if="membership.level === 1">无</span>
                    <span v-else>
                        {{ membership.end_date }}
                        <el-tag v-if="isExpired" type="danger" size="small">已过期</el-tag>
                    </span>
                </el-descriptions-item>
          <!-- 新增积分显示 -->
                <el-descriptions-item label="会员积分">
                    <div v-if="membership.level > 1" class="points-display">
                        <el-tag type="warning" class="points-tag">
                            <i class="el-icon-coin"></i> {{ membership.points || 0 }} 积分
                        </el-tag>
                        <el-button 
                            type="text" 
                            size="small" 
                            @click="showPointsDetail"
                            class="points-detail-btn">
                            查看详情
                        </el-button>
                    </div>
                    <div v-else class="points-upgrade-hint">
                        <el-alert 
                            type="info" 
                            :closable="false"
                            show-icon>
                            快升级会员来开启积分功能吧！！！
                        </el-alert>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            
    <div class="renew-action">
      <el-button type="primary" class="renew-button" @click="handleRenew">
        <i class="el-icon-star-on"></i> 立即续费
      </el-button>
      <el-button type="primary" class="renew-button" @click="goToPointsMall">
        <i class="el-icon-star-on"></i> 积分商城
      </el-button>
    </div>
    <div class="points-action">
  
</div>
    
  </el-card>
          <!-- 续费引导卡片 -->
          <el-card class="renew-guide-card" shadow="always">
            <div class="renew-guide-content">
              <h3>升级会员，尊享更多特权！</h3>
              <p>成为高级或至尊会员，享受专属折扣和优先服务！</p>
              <el-button type="primary" class="guide-renew-button" @click="showUpgradeDialog">
                立即升级会员
              </el-button>
            </div>
          </el-card>
        </div>
        <!-- 会员权益卡片 -->
        <div class="membership-benefits">
          <h3 class="section-title">会员权益一览</h3>
          <el-tabs v-model="activeLevel" type="card" class="benefits-tabs" @tab-change="handleLevelChange">
            <!-- 银米会员 -->
            <el-tab-pane label="银米会员" name="1">
              <el-card class="benefit-card" shadow="hover">
                <div class="benefit-header">
                  <i class="el-icon-coin"></i>
                  <h4>银米会员</h4>
                </div>
                <ul class="benefits-list">
                  <li>专属银米标识</li>
                  <li>每月银米优惠券</li>
                  <li>基础客户支持</li>
                </ul>
              </el-card>
            </el-tab-pane>

            <!-- 金米会员 -->
            <el-tab-pane label="金米会员" name="2">
              <el-card class="benefit-card" shadow="hover">
                <div class="benefit-header">
                  <i class="el-icon-medal"></i>
                  <h4>金米会员</h4>
                </div>
                <ul class="benefits-list">
                  <li>订单享 5% 折扣</li>
                  <li>专属金米标识</li>
                  <li>优先客户支持</li>
                  <li>每月金米优惠券</li>
                  <li>专属活动邀请</li>
                  <li>每消费1元获得1积分</li>
                </ul>
              </el-card>
            </el-tab-pane>

            <!-- 白金米会员 -->
            <el-tab-pane label="白金米会员" name="3">
              <el-card class="benefit-card" shadow="hover">
                <div class="benefit-header">
                  <i class="el-icon-trophy"></i>
                  <h4>白金米会员</h4>
                </div>
                <ul class="benefits-list">
                  <li>订单享 10% 折扣</li>
                  <li>专属客服经理</li>
                  <li>每月白金优惠券</li>
                  <li>VIP 专属活动</li>
                  <li>免费快递升级</li>
                  <li>每消费1元获得1.5积分</li>
                </ul>
              </el-card>
            </el-tab-pane>

            <!-- 钻石米会员 -->
            <el-tab-pane label="钻石米会员" name="4">
              <el-card class="benefit-card" shadow="hover">
                <div class="benefit-header">
                  <i class="el-icon-diamond"></i>
                  <h4>钻石米会员</h4>
                </div>
                <ul class="benefits-list">
                  <li>订单享 15% 折扣</li>
                  <li>24小时专属客服</li>
                  <li>每月钻石优惠券</li>
                  <li>新品优先体验权</li>
                  <li>免费礼品包装</li>
                  <li>每消费1元获得2积分</li>
                </ul>
              </el-card>
            </el-tab-pane>

            <!-- 至尊钻石米会员 -->
            <el-tab-pane label="至尊钻石米会员" name="5">
              <el-card class="benefit-card" shadow="hover">
                <div class="benefit-header">
                  <i class="el-icon-crown"></i>
                  <h4>至尊钻石米会员</h4>
                </div>
                <ul class="benefits-list">
                  <li>订单享 20% 折扣</li>
                  <li>个人专属顾问</li>
                  <li>无限次免费退换</li>
                  <li>私人定制服务</li>
                  <li>年度尊享礼盒</li>
                  <li>线下活动VIP席位</li>
                  <li>每消费1元获得3积分</li>
                </ul>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>

    <!-- 升级会员弹窗 -->
    <el-dialog v-model="upgradeDialogVisible" title="升级会员" width="500px">
      <div class="upgrade-content">
        <el-select v-model="selectedLevel" placeholder="请选择目标等级">
          <el-option 
            v-for="level in upgradeOptions"
            :key="level"
            :label="formatMembershipLevel(level)"
            :value="level"
          />
        </el-select>
        <el-input-number 
          v-model="selectedMonths" 
          :min="1" 
          :max="12"
          label="购买月数"
        />
        <div class="payment-amount">
          应付金额: ¥{{ calculateUpgradeFee(selectedLevel, selectedMonths) }}
        </div>
      </div>
      <template #footer>
        <el-button @click="upgradeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpgrade">立即支付</el-button>
      </template>
    </el-dialog>

    <!-- 新增：会员到期提醒弹窗 -->
    <el-dialog 
      v-model="showExpiredDialog" 
      title="会员已过期" 
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="expired-content">
        <el-alert type="warning" show-icon>
          您的会员权益已过期，部分功能将受限
        </el-alert>
        <p class="expired-desc">请续费或升级恢复会员特权</p>
      </div>
      <template #footer>
        <el-button 
          type="primary" 
          @click="handleExpireDialogConfirm">
          立即升级
        </el-button>
        <el-button @click="showExpiredDialog = false">稍后再说</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useSessionStorage } from '@vueuse/core'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { 
  getMembershipService,
  getMemberValidityService,
  getUpgradeOptionsService
} from '@/api/user'
import { useRouter } from 'vue-router'
// 引入会员支付接口
import { createMemberOrderAndPay } from '@/api/pay';


// 会员数据
const membership = ref({ 
  level: 0, 
  start_date: '', 
  end_date: '',
  orderId: null,
  points: 0 
})

// 升级相关数据
const upgradeOptions = ref([])
const upgradeDialogVisible = ref(false)
const selectedLevel = ref(2)
const selectedMonths = ref(1)
const activeLevel = ref('1')
const router = useRouter()
const loading = ref(false)  // 加载状态


// 过期状态管理
const isExpired = ref(false)
const showExpiredDialog = ref(false)
const hasShownExpireWarning = useSessionStorage('hasShownExpireWarning', false)

// 初始化加载数据
const fetchData = async () => {
  try {
    console.log('开始获取会员数据...')
    const [memberRes, validityRes] = await Promise.all([
      getMembershipService(),
      getMemberValidityService()
    ])
    
    console.log('会员信息响应:', memberRes)
    console.log('有效期响应:', validityRes)
    
    if (memberRes.data?.code === '200' || memberRes.data?.code === 200) {
      const memberLevel = memberRes.data.data?.membershipLevel || 1
      console.log('从后端获取的原始会员等级:', memberLevel, '类型:', typeof memberLevel)
      
      // 确保会员等级在有效范围内，并且是整数
      let validLevel = Number(memberLevel)
      if (isNaN(validLevel) || validLevel < 1 || validLevel > 5) {
        console.warn('无效的会员等级，使用默认值1:', validLevel)
        validLevel = 1
      }
      validLevel = Math.floor(validLevel) // 确保是整数
      
      membership.value = {
        level: validLevel,
        start_date: validityRes.data?.data?.start_date || validityRes.data?.start_date || '无',
        end_date: validityRes.data?.data?.end_date || validityRes.data?.end_date || '无',
        orderId: memberRes.data.data?.orderId || memberRes.data.data?.id || null,
        points: memberRes.data.data?.points || 0
      }

      console.log('原始会员等级:', memberLevel)
      console.log('处理后的会员等级:', validLevel)
      console.log('处理后的会员信息:', membership.value)

      // 检查过期状态
      isExpired.value = membership.value.level > 1 && 
                       membership.value.end_date !== '无' &&
                       new Date(membership.value.end_date) < new Date()

      // 首次过期提醒
      if (isExpired.value && !hasShownExpireWarning.value) {
        showExpiredDialog.value = true
        hasShownExpireWarning.value = true
      }

      // 初始化标签页为当前等级
      activeLevel.value = membership.value.level.toString()
    } else {
      console.error('获取会员信息失败:', memberRes.data)
      ElMessage.error('获取会员信息失败')
    }
  } catch (error) {
    console.error('数据加载错误:', error)
    ElMessage.error(`数据加载失败: ${error.message}`)
  }
}

// 显示升级弹窗
const showUpgradeDialog = async () => {
  try {
    const res = await getUpgradeOptionsService()
    if (res.data.code === '200') {
      // 允许升级到更高等级
      upgradeOptions.value = res.data.data.filter(level => level > membership.value.level)
      if (upgradeOptions.value.length === 0) {
        ElMessage.warning('您已是最高等级会员')
        return
      }
      selectedLevel.value = upgradeOptions.value[0]
      selectedMonths.value = 1  // 重置月数
      upgradeDialogVisible.value = true
    }
  } catch (error) {
    ElMessage.error(`获取升级选项失败: ${error.message}`)
  }
}

// 处理升级支付
const handleUpgrade = async () => {
  if (loading.value) return
  loading.value = true
  const loadingInstance = ElLoading.service({ text: '处理中...' })

  try {
    // 1. 确认用户意图
    await ElMessageBox.confirm(
      `确认升级到${formatMembershipLevel(selectedLevel.value)}，共${selectedMonths.value}个月？`,
      '会员升级',
      { confirmButtonText: '支付宝支付', cancelButtonText: '取消' }
    )

    // 2. 强制转换为数字并验证
    const targetLevelNum = Number(selectedLevel.value);
    const monthsNum = Number(selectedMonths.value);
    
    // 验证是否为有效数字
    if (isNaN(targetLevelNum) || !Number.isInteger(targetLevelNum) || targetLevelNum < 1) {
      ElMessage.error('请选择有效的目标等级');
      return;
    }
    if (isNaN(monthsNum) || !Number.isInteger(monthsNum) || monthsNum < 1 || monthsNum > 12) {
      ElMessage.error('请选择有效的月数（1-12）');
      return;
    }

    // 3. 直接调用会员支付接口（创建订单并发起支付）
    // 根据后端MemberPayDTO，需要level、amount和months三个字段
    const upgradeData = {
      level: Number(targetLevelNum),  // 确保是数字类型
      amount: Number(calculateUpgradeFee(targetLevelNum, monthsNum)),  // 确保是数字类型
      months: Number(monthsNum)       // 确保是数字类型
    }
    console.log('升级参数:', upgradeData)
    console.log('目标会员等级:', targetLevelNum, '类型:', typeof targetLevelNum)
    console.log('upgradeData.level:', upgradeData.level, '类型:', typeof upgradeData.level)
    
    // 验证必需参数
    if (!upgradeData.level || !upgradeData.amount || !upgradeData.months) {
      throw new Error('升级参数不完整')
    }
    
    const payRes = await createMemberOrderAndPay(upgradeData)
    console.log('升级支付接口响应:', payRes)
    console.log('支付接口响应类型:', typeof payRes.data)

    // 4. 处理支付表单
    handlePaymentForm(payRes.data)

    // 5. 关闭弹窗，等待支付结果
    upgradeDialogVisible.value = false
    ElMessage.success('正在跳转到支付页面，请完成支付')

  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '升级失败')
    }
  } finally {
    loading.value = false
    loadingInstance.close()
  }
}

// 处理续费支付
const handleRenew = async () => {
  if (loading.value) return

  // 检查会员等级
  const currentLevel = membership.value.level || 1;
  
  if (currentLevel === 1) {
    await ElMessageBox.alert(
      '基础会员无需续费，如需更多权益请升级会员等级',
      '会员提示',
      {
        confirmButtonText: '我知道了',
        type: 'warning',
        callback: () => {
          // 点击确定后不执行任何操作
        }
      }
    );
    return;
  }
  loading.value = true
  const loadingInstance = ElLoading.service({ text: '处理中...' })

  try {
    // 1. 获取续费月数并验证
    const { value: months } = await ElMessageBox.prompt(
      '请输入续费月数（1-12）',
      '会员续费',
      {
        inputPattern: /^[1-9]\d*$/,
        inputValue: '1',
        inputErrorMessage: '请输入1-12之间的数字',
        confirmButtonText: '支付宝支付'
      }
    )

    // 强制转换为数字并验证
    const monthsNum = Number(months)
    if (isNaN(monthsNum) || !Number.isInteger(monthsNum) || monthsNum < 1 || monthsNum > 12) {
      ElMessage.error('请输入有效的月数（1-12）')
      return
    }

    // 2. 验证当前会员等级
    const currentLevel = membership.value.level || 1
    if (currentLevel < 1 || currentLevel > 5) {
      ElMessage.error('会员信息异常，请刷新页面重试')
      return
    }

    // 3. 直接调用会员支付接口（创建订单并发起支付）
    // 根据后端MemberPayDTO，需要level、amount和months三个字段
    const renewData = {
      level: Number(currentLevel),  // 确保是数字类型
      amount: Number(calculateRenewFee(monthsNum)),  // 确保是数字类型
      months: Number(monthsNum)     // 确保是数字类型
    }
    console.log('续费参数:', renewData)
    console.log('当前会员等级:', currentLevel, '类型:', typeof currentLevel)
    console.log('完整会员信息:', membership.value)
    console.log('renewData.level:', renewData.level, '类型:', typeof renewData.level)
    
    // 验证必需参数
    if (!renewData.level || !renewData.amount || !renewData.months) {
      throw new Error('续费参数不完整')
    }
    
    const payRes = await createMemberOrderAndPay(renewData)
    console.log('续费支付接口响应:', payRes)
    console.log('支付接口响应类型:', typeof payRes.data)

    // 4. 处理支付表单
    handlePaymentForm(payRes.data)

    // 5. 提示信息
    ElMessage.success('正在跳转到支付页面，请完成支付')

  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '续费失败')
    }
  } finally {
    loading.value = false
    loadingInstance.close()
  }
}

const showPointsDetail = () => {
  const pointsRate = {
    1: 0,
    2: 1,
    3: 1.5,
    4: 2,
    5: 3
  }
  
  ElMessageBox.alert(
    `<div class="points-detail-content">
      <div class="current-rate">
        您当前是<strong>${formatMembershipLevel(membership.value.level)}</strong>，
        每消费1元可获得<strong>${pointsRate[membership.value.level] || 0}积分</strong>
      </div>
      <div class="rules-title">积分规则:</div>
      <ul class="rules-list">
        <li>银米会员(1级)：1元=0积分</li>
        <li>金米会员(2级)：1元=1积分</li>
        <li>白金会员(3级)：1元=1.5积分</li>
        <li>钻石会员(4级)：1元=2积分</li>
        <li>至尊会员(5级)：1元=3积分</li>
        <li>积分可兑换余额</li>
        <li>每月1日清零上月积分</li>
      </ul>
    </div>`,
    '积分详情',
    {
      confirmButtonText: '我知道了',
      dangerouslyUseHTMLString: true,
      customClass: 'points-detail-dialog'
    }
  )
}


const goToPointsMall = () => {
  router.push('/Dashboard/points-mall') 
}

const handleExpireDialogConfirm = () => {
  showExpiredDialog.value = false
  showUpgradeDialog()  // 直接打开升级弹窗
}

const formatMembershipLevel = (level) => {
  const map = { 
    1: '银米会员', 2: '金米会员', 3: '白金米会员',
    4: '钻石米会员', 5: '至尊钻石米会员'
  }
  return map[level] || '普通用户'
}

const getLevelTagType = (level) => {
  const map = {
    1: 'info',  // 银米会员添加默认样式
    2: 'success', 3: 'warning', 4: 'danger', 5: 'primary'
  }
  return map[level] || 'info'
}

const calculateUpgradeFee = (level, months) => {
  const priceMap = { 2: 10, 3: 20, 4: 30, 5: 50 }
  return (priceMap[level] || 0) * months
}

const calculateRenewFee = (months) => {
  const basePrice = { 1: 0, 2: 10, 3: 20, 4: 30, 5: 50 }
  return (basePrice[membership.value.level] || 0) * months
}

const handleLevelChange = (level) => {
  activeLevel.value = level
}

const getPointsRate = (level) => {
  const rateMap = { 1: 0, 2: 1, 3: 1.5, 4: 2, 5: 3 }
  return rateMap[level] || 0
}

// 处理支付表单提交的辅助函数
const handlePaymentForm = (htmlString) => {
  if (!htmlString) {
    throw new Error('支付接口未返回数据')
  }
  
  if (typeof htmlString !== 'string') {
    throw new Error('支付接口返回数据格式异常')
  }

  // 检查是否包含表单标签
  if (!htmlString.includes('<form') || !htmlString.includes('</form>')) {
    console.error('支付接口返回内容:', htmlString)
    throw new Error('支付表单格式异常')
  }

  const div = document.createElement('div')
  div.innerHTML = htmlString
  document.body.appendChild(div)
  
  const form = div.querySelector('form')
  if (!form) {
    document.body.removeChild(div)
    throw new Error('无法找到支付表单')
  }
  
  // 检查表单是否有action属性
  if (!form.action) {
    document.body.removeChild(div)
    throw new Error('支付表单缺少action属性')
  }
  
  console.log('提交支付表单到:', form.action)
  form.submit()
  
  // 清理DOM
  setTimeout(() => {
    if (document.body.contains(div)) {
      document.body.removeChild(div)
    }
  }, 1000)
}

// 页面可见性变化监听（支付完成返回时刷新数据）
const handleVisibilityChange = () => {
  if (!document.hidden) {
    // 页面变为可见时，延迟刷新数据
    setTimeout(() => {
      fetchData()
    }, 1000)
  }
}

onMounted(() => {
  fetchData()
  // 监听页面可见性变化
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

onUnmounted(() => {
  // 清理监听器
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.header-banner {
  text-align: center;
  padding: 16px 20px;
  background: linear-gradient(90deg, #409eff 50%, #79bbff 100%);
  color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;

  h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
  }

  p {
    font-size: 14px;
    margin: 0;
    opacity: 0.9;
  }
}

.box-card {
  flex: 1;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.membership-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 12px;
  text-align: center;
}

.info-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.info-card {
  border-radius: 10px;
  background: #fff;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .membership-descriptions {
    width: 100%;
  }

  .level-tag {
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
  }

  .renew-action {
    text-align: center;
    margin-top: 16px;
  }

  .renew-button {
    width: 180px;
    font-size: 14px;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--el-color-primary-dark-2);
    }
  }
}

.renew-guide-card {
  border-radius: 10px;
  background: linear-gradient(90deg, #e6f7ff 0%, #e6fffb 100%);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .renew-guide-content {
    text-align: center;
    padding: 16px;

    h3 {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 12px;
    }

    p {
      font-size: 14px;
      color: var(--text-color);
      margin-bottom: 16px;
    }

    .guide-renew-button {
      width: 200px;
      font-size: 14px;
      padding: 12px;
      border-radius: 8px;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--el-color-success-dark-2);
      }
    }
  }
}

.membership-benefits {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.benefits-tabs {
  :deep(.el-tabs__nav-wrap) {
    margin-bottom: 12px;
  }

  :deep(.el-tabs__item) {
    font-size: 14px;
    padding: 8px 20px;
  }
}

.benefit-card {
  border-radius: 10px;
  background: #fff;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .benefit-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;

    i {
      font-size: 24px;
      color: var(--el-color-primary);
    }

    h4 {
      font-size: 16px;
      font-weight: 500;
      margin: 0;
    }
  }

  .benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      font-size: 14px;
      color: var(--text-color);
      margin-bottom: 12px;
      padding-left: 24px;
      position: relative;

      &:before {
        content: '✔';
        position: absolute;
        left: 0;
        color: var(--el-color-primary);
        font-weight: bold;
      }
    }
  }
}

.upgrade-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .el-select, .el-input-number {
    width: 100%;
  }
  
  .payment-amount {
    font-size: 18px;
    font-weight: bold;
    color: var(--el-color-primary);
    text-align: right;
    padding: 8px 0;
  }
}

.expired-content {
  text-align: center;
  .expired-desc {
    margin-top: 16px;
    color: var(--el-text-color-secondary);
  }
}

.points-display {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .points-tag {
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 12px;
    
    i {
      margin-right: 4px;
    }
  }
  
  .points-detail-btn {
    padding: 0;
    margin-left: 8px;
    color: var(--el-color-primary);
  }
}

.points-upgrade-hint {
  :deep(.el-alert) {
    padding: 8px;
    background-color: #f4f4f5;
    
    .el-alert__content {
      padding: 0;
    }
  }
}

// 积分详情弹窗样式
:deep(.points-detail-dialog) {
  .el-message-box__content {
    white-space: pre-line;
    line-height: 1.8;
  }
}
</style>